<template>
  <div
    ref="contextMenuRef"
    class="context-menu"
    :style="{
      left: left + 'px',
      top: top + 'px',
      visibility: config.visible ? 'visible' : 'hidden'
    }"
    @click="config.hide()"
  >
    <div>锁定屏幕...</div>
    <hr />
    <div @click="openThemeSetting">主题设置...</div>
    <div>应用窗口管理...</div>
    <hr />
    <div @click="reload">刷新...</div>
    <div @click="openAbout">关于我们</div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue"
import { sizeToPxNumber, useThemeStore } from "@/stores/theme"
import VariableName from "../../../stores/theme/variable-name"
import { useApplicationStore } from "@/stores/application"
import type ContextMenuType from "./types"
import { storeToRefs } from "pinia"

const props = defineProps({
  config: {
    type: Object as () => ContextMenuType.Config,
    required: true
  }
})

const themeStore = useThemeStore()
const contextMenuRef = ref()

const dockSize = themeStore.getVariableRef(VariableName.Dock.size, sizeToPxNumber)

const left = computed(() => {
  const width = contextMenuRef.value?.clientWidth
  if (!width) {
    return props.config.coordinate.x
  }
  if (props.config.coordinate.x + width > window.innerWidth) {
    return props.config.coordinate.x - width
  }
  return props.config.coordinate.x
})

const top = computed(() => {
  const height = contextMenuRef.value?.offsetHeight
  if (!height) {
    return props.config.coordinate.y
  }
  if (props.config.coordinate.y + height > window.innerHeight - dockSize.value) {
    return window.innerHeight - dockSize.value - height
  }
  return props.config.coordinate.y
})

const { applicationsContext } = storeToRefs(useApplicationStore())

function openThemeSetting() {
  applicationsContext.value.getApplication("theme-setting")?.open()
}

function openAbout() {
  applicationsContext.value.getApplication("about")?.open()
}

function reload() {
  // localStorage.setItem("application_applicationsContext", applicationsContext.value.toString())
}
</script>

<style scoped lang="scss">
.context-menu {
  position: absolute;
  width: 2rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 10px;
  border: 0.5px solid rgba(100, 100, 100, 0.5);
  overflow: hidden;

  hr {
    border: none;
    border-top: 1px solid #ddd;
  }

  div {
    cursor: pointer;
    font-size: 13px !important;
    color: #333;
    border-radius: 5px;
    line-height: 2;
    padding: 0 12px;
    display: flex;
    align-items: center;
    margin: 3px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div:hover {
    background: #4b9efb;
    color: white;
    border-radius: 5px;
  }
}
</style>
